Skip to main content

Shadow

Description

The shadow property can simply be understood as a String Property containing four unit-number values. These four values each configure another parameter of the shadow.

FeatureValue
Theme injectable
Possible Inputs5px 10px 5px 10px #888888

Shadow Elements

x and y

The x and y values will move the whole shadow, as they work as coordinates. For positive x-values the shadow will be moved to the right, for negative ones to the left. For positive y-values the shadow will be moved to the bottom, for negative ones to the top.

info

The unit of x and y is pixels in all cases.

Blur

The blur value is also given in pixels and will blur the shadow depending on the value, the higher the value the more intense the blur. The value has to be positive, negative values are forbidden.

Spread

The spread value is also given in pixels. This value is responsible for making the shadow bigger or smaller. By default the shadow has the same width and height as its component. A positive value will increase the width and height of the shadow, a negative value will decrease it.

Occurrences

Toolbar

The shadow property is used in the Toolbar Extension Shadow Picker inside the Toolbar.

Example for toolbar picker with shadow value

Detail Panel

The shadow property is used in the Detail Panel Shadow Picker in the Detail Panel. You can toogle the whole shadow to disappear in here, while the rest does not differ from it's counterpart in the Toolbar Extension.

Example for detail panel picker with shadow value